import { defineComponent, ref, reactive } from "vue";
import TablePage from "@/components/TablePage/TablePage";
import { tablesInterface } from "@/common/interface/table.interface";
import ApplicationChordsService from "./index.service";
import JsonPreview from "@/components/JsonPreview/JsonPreview";
import { analysisPermissionsAndOr } from "@/common/auth/auth";
import to from "await-to-js";
import { message, Modal } from "ant-design-vue";
import Add from "./Add/Add";
const StatusSwitch = defineComponent({
  props: {
    record: {
      type: Object,
    },
    value: {
      type: Number,
    }
  },
  emits: ["change"],
  setup(props: any, { emit }) {
    const applicationChordsService = new ApplicationChordsService();
    const loading = ref(false);
    const statusChange = async (e) => {
      loading.value = true;
      const [err, res]: any = await to(applicationChordsService.statusChange({
        record: props.record,
        status: e,
      }));
      if (!err) {
        e === 0 ? message.success("开启成功!") : message.success("关闭成功!");
        emit("change");
      }
      loading.value = false;
    }
    return () => <>
      {
        analysisPermissionsAndOr("music:applicationChords:edit") ? <a-switch loading={loading.value} checked={props.value} checkedValue={0} unCheckedValue={1} onChange={(e) => { statusChange(e) }} /> : <span>{props.value === 0 ? "已开启" : "已关闭"}</span>
      }
    </>
  }
})
export default defineComponent({
  name: "ApplicationChords",
  setup() {
    const tablePageRef = ref(null as any);
    const applicationChordsService = new ApplicationChordsService();
    // 表格定义
    const tables = reactive({
      list: [
        {
          title: "应用和弦管理",
          rowKey: "id",
          columns: [
            {
              title: "ID",
              dataIndex: "id",
              align: "center",
              width: "80px",
            },
            {
              title: "内容",
              dataIndex: "content",
              align: "center",
              width: "280px",
            },
            {
              title: "排序",
              dataIndex: "sort",
              align: "center",
              width: "180px",
            },
            {
              title: "开启状态",
              dataIndex: "status",
              align: "center",
              width: "180px",
            },
            {
              title: "备注",
              dataIndex: "remark",
              align: "center",
              width: "280px",
            },
            {
              title: "创建人",
              dataIndex: "createBy",
              align: "center",
              width: "180px",
            },
            {
              title: "创建时间",
              dataIndex: "createTime",
              align: "center",
              width: "180px",
            },
            {
              title: "更新人",
              dataIndex: "updateBy",
              align: "center",
              width: "180px",
            },
            {
              title: "更新时间",
              dataIndex: "updateTime",
              align: "center",
              width: "180px",
            },
          ],
          toolbar: {
            left: ["refresh", "add"],
            right: ["filter", "search"],
            add: {
              permissions: "music:applicationChords:add",
              hidden: () => {
                return tablePageRef.value?.getDataSource()?.length > 0;
              },
              handler: () => {
                const addPopupRef = tablePageRef.value.getPopup("addRef");
                addPopupRef.value.open({ type: 'add' });
              }
            },
          },
          searchForm: {
            status: {
              type: "select",
              label: "开启状态",
              attrs: { placeholder: "开启状态", allowClear: true },
              datas: [{ label: "启用", value: 0 }, { label: "关闭", value: 1 }],
            },
          },
          service: applicationChordsService,
          operation: ({ record }) => [
            {
              type: "edit",
              permissions: "music:applicationChords:edit",
              clickHandler: () => {
                const addPopupRef = tablePageRef.value.getPopup("addRef");
                addPopupRef.value.open({ type: 'edit', id: record.id });
              }
            },
            {
              type: "delete",
              permissions: "music:applicationChords:remove",
              clickHandler: "delete",
            },
          ],
          bodyCell: ({ text, record, index, column }) => {
            if (column.dataIndex === "status") {
              return <>
                <StatusSwitch record={record} value={Number(text)} onChange={() => tablePageRef.value.reload()} />
              </>
            }
            if (column.dataIndex === "content") {
              return <a-button size="small" type="primary" onClick={() => { showJson(text) }}>查看</a-button>
            }
          },
          popups: [
            {
              ref: "addRef",
              dom: () => <Add onChange={() => { tablePageRef.value.reload() }} />,
            },
            {
              ref: "jsonPreviewRef",
              dom: () => <JsonPreview />,
            },
          ],
          pagination: true,
          tableSourceFormat: {
            data: 'rows',
            pageSize: 'pageSize',
            current: 'pageNum',
          },
        }
      ],
    } as tablesInterface)
    // 配置项
    const config = reactive({
      table: tables.list[0],
    })
    // 查看打谱json
    const showJson = (jsonStr: string) => {
      const jsonPreviewRef = tablePageRef.value.getPopup("jsonPreviewRef");
      jsonPreviewRef.value.open({
        title: "应用和弦显示",
        jsonStr,
      });
    }
    return () => (
      <TablePage ref={tablePageRef} config={config} />
    )
  }
})